<template>
  <ElConfigProvider :locale="zhCn">
    <ElForm class="dialog-form" ref="form" :model="data">
      <div class="dialog-form-body">
        <ElFormItem prop="userId" label="记录人员" :rules="userRule">
          <ElSelect placeholder="" v-model="data.userId">
            <ElOption v-for="item in list" :key="item.userId" :value="item.userId" :label="item.name" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem prop="recordTime" label="记录时间" :rules="timeRule">
          <ElDatePicker v-model="data.recordTime" style="width: 100%;" format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" type="datetime" />
        </ElFormItem>
      </div>
      

      <div class="dialog-form-footer">
        <ElButton type="primary" @click="save">保存</ElButton>
        <ElButton @click="cancel">取消</ElButton>
      </div>
    </ElForm>
    
  </ElConfigProvider>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElForm, ElFormItem, ElSelect, ElOption, ElButton, ElDatePicker, ElConfigProvider } from 'element-plus'
import { getUserList } from '../../api'
import dayjs from 'dayjs'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

interface Props {
  id: string | number
}
const props = defineProps<Props>()
interface Emits {
  resolve: [object],
  reject: []
}
const emit = defineEmits<Readonly<Emits>>()

const form = ref()
const list = ref([])
const data = reactive({
  userId: '',
  recordTime: dayjs().format('YYYY-MM-DD HH:mm:ss')
})
const userRule = { required: true, message: '记录人员是必须的', trigger: 'change' }
const timeRule = { required: true, message: '记录时间是必须的', trigger: 'change' }
onMounted(() => {
  getUserList().then(res => {
    list.value = res || []
  })
})

const save = async () => {
  await form.value.validate()
  emit('resolve', { ...data, hoId: props.id })
}

const cancel = () => {
  emit('reject')
}
</script>

<style scoped lang="scss">
.dialog-form {
  &-body {
    padding: 16px 16px 0;
  }
  &-footer {
    position: relative;
    height: 64px;
    background: #FFFFFF;
    box-shadow: 0 -5px 11px 0 #99999921;
    border-radius: 0 0 4px 4px;
    display: flex;
    align-items: center;
    padding: 0 34px;
  }
  :deep(.el-date-editor) {
    width: 100%;
  }
  :deep(.el-input-number) {
    width: 100%;
  }
  :deep(.el-input-number .el-input__inner) {
    text-align: left;
  }
}
</style>
